'use strict';
import React from 'react'
import { Text, View, RefreshControl, TouchableOpacity, Image, FlatList } from 'react-native'
import { Metrics, Colors, Fonts } from '../../Themes'
import { API, WINDOW } from '../../Services'
import styles from '../Styles/CommonContainerStyles'
import HomeProductCell from './HomeProductCell'
import { CustomNavigationBar } from '../../Components/CustomNavibar'
import LdImage from '../../Components/LdImage'
import { Grid } from '@ant-design/react-native'
import Modal from 'react-native-modal'
import Swiper from 'react-native-swiper'
const menuData = [
    { icon: require('../../Images/image_yellow.png'), text: '建筑人才', des: '高端人才等你来选' },
    // { icon: require('../../Images/image_red.png'), text: '建筑人才', des: '高端人才等你来选' },
    // { icon: require('../../Images/image_purple.png'), text: '建筑人才', des: '高端人才等你来选' }
]

class HomeScreen extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            dataSource_jcfenlei: [],
            dataSource: [],
            isRefreshing: false,
            beijing_alpha: 0,
            beijing_opacity: 1,
            city: '中国竹网',
            addList: null,
        }
    }

    componentDidMount() {
        this._onRefresh()
    }

    _onRefresh = () => {
        this.setState({ isRefreshing: true })
        this._fetch_indexName()
    }

    _fetch_indexName() {
        API.indexName().then((response) => {
            const { ok, data } = response
            if (typeof(data)=='object') {
                if (ok) {
                    let list = data?.nameNoNavList
                    let tempList = list.map(
                        (element) => {
                            if (element.modularName == '企业黄页') {
                                element.modularName = '邀请'
                            }
                            return { icon: WINDOW.getFullImage(element.modularIcon), text: element.modularName, data_id: element.ID }
                        }
                    )
                    this.setState({ dataSource_jcfenlei: tempList, addList: data?.adList, isRefreshing: false })
                    this._fetch_getLike()
                } else {
                    WINDOW.showToastError(data.msg || '请求失败！')
                    this.setState({ isRefreshing: false })
                }
            }else{
                this._fetch_indexName()
            }
 
        })
    }

    //最新发布
    _fetch_getLike() {
        API.goodsByCataCode('', 20).then((response) => {
            const { ok, data } = response
            if (typeof(data)=='object') {
                if (ok) {
                    this.setState({ dataSource: data?.goodsListByCata})
                } 
            }else{
                this._fetch_getLike()
            }
 
        })
    }

    _selectGride = (index) => {
        if (index == 0) {
            this.props.navigation.navigate('ArticleListCate',{ID:"4053"})
        }
        if (index == 1) {
            this.props.navigation.navigate('ArticleListCate',{ID:"4054"})
        }
        if (index == 2) {
            this.props.navigation.navigate('ArticleListCate',{ID:"4055"})
        }
        if (index == 3) {
            this.props.navigation.navigate('ArticleListCate',{ID:"4057"})
        }
        if (index == 4) {
            this.props.navigation.navigate('ArticleListCate',{ID:"4080"})
        }
        if (index == 5) {
            this.props.navigation.navigate('ArticleListCate',{ID:"4081"})
        }

        if (index == 6) {
            this.props.navigation.navigate('YaoQing')
        }
        if (index == 7) {
            this.props.navigation.navigate('FanKui')
        }
    }

    _selectMenu = (index) => {
        if (index === 0) {
            this.props.navigation.navigate('Newslist') 
        }else{
            this.props.navigation.navigate('Newslist') 
        }
    }

    _onScroll(event) {
        let opacity
        let offset = event.nativeEvent.contentOffset.y
        opacity = 1 - offset / 200
        if (offset < 200) {
            opacity = 1 - offset / 200
        } else {
            opacity = 0
        }
        this.setState({ beijing_opacity: opacity })
    }

    _renderHeader = () => {
        return (
            <View>
                {this.state.addList ? this._renderSwiper() : null}
                <View style={{ height: 10 }} />
                <Grid
                    data={this.state.dataSource_jcfenlei}
                    columnNum={4}
                    isCarousel
                    hasLine={false}
                    carouselProps={{
                        dotActiveStyle: { backgroundColor: Colors.mainColor },
                    }}
                    onPress={(_el, index) => { this._selectGride(index) }}
                />
                <View style={{ alignItems: 'center' }}>
                    {menuData.map((element, index) => {
                        return (
                            <TouchableOpacity key={index} onPress={() => this._selectMenu(index)}>
                                <Image style={{ width: Metrics.screenWidth - 20, height: (Metrics.screenWidth - 20) * 121 / 328, margin: 10 }} source={element.icon} resizeMode='stretch' >
                                </Image>
                            </TouchableOpacity>
                        )
                    })}
                </View>
                <View style={{ flexDirection: 'row', marginVertical: 20, marginLeft: 15, alignItems: 'center' }}>
                    <View style={{ width: 3, height: 13, borderRadius: 4, backgroundColor: Colors.mainColor }} />
                    <Text style={{ fontSize: 16, color: '#333333', marginLeft: 5 }}>最新发布</Text>
                </View>
            </View>
        )
    }

    _renderAd(element, index) {
        return (
            <TouchableOpacity activeOpacity={0.9} key={index}>
                <LdImage
                    key={index}
                    style={{ width: Metrics.screenWidth - 20, height: (Metrics.screenWidth - 20) * 156 / 355, alignSelf: 'center', borderRadius: 8 }}
                    url={element.imgPath}
                />
            </TouchableOpacity>
        )
    }

    _renderSwiper() {
        return (
            <Swiper ref={(swiper) => { this.swiper = swiper }} height={(Metrics.screenWidth - 20) * 156 / 355} width={Metrics.screenWidth} marginTop={15} autoplay >
                {this.state.addList.map(this._renderAd.bind(this))}
            </Swiper>
        )
    }

    _renderRow({ item }) {
        return (
            <TouchableOpacity onPress={() => this.props.navigation.navigate('ProductDetail', { item })}>
                <HomeProductCell {...item} />
            </TouchableOpacity>
        )
    }

    render() {
        let bj_height = 180 + Metrics.statusBarHeight
        return (
            <View style={[styles.container, { backgroundColor: Colors.background }]}>
                <Image source={require('../../Images/beijing.png')} style={{ width: '100%', height: bj_height, position: 'absolute', backgroundColor: `rgba(0, 0, 0,${this.state.beijing_alpha})`, opacity: this.state.beijing_opacity, resizeMode: 'stretch' }} />
                <CustomNavigationBar style={{ backgroundColor: `rgba(249, 209, 1,${1 - this.state.beijing_opacity})` }}>
                    {/* <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ marginLeft: 13.5, marginRight: 8, fontSize: 14, color: '#000000', fontWeight: 'bold' }}>{this.state.city}</Text>
                            <Image source={require('../../Images/home_nav_combo_nor.png')} />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('ProductList', { viewType: 3 })} style={{ flex: 1, height: 26, borderRadius: 13, flexDirection: 'row', marginLeft: 15, marginRight: 15, backgroundColor: 'white', alignItems: 'center' }}>
                            <Image source={require('../../Images/home_nav_search_nor.png')} style={{ marginLeft: 12 }} />
                            <Text style={{ marginLeft: 8, color: '#CCCCCC' }}>请输入搜索关键词</Text>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <Image source={require('../../Images/icon_home_fenxiang.png')} style={{ marginRight: 12 }} />
                        </TouchableOpacity>
                    </View> */}
                </CustomNavigationBar>
                <FlatList
                    ref='listView'
                    data={this.state.dataSource}
                    ListHeaderComponent={this._renderHeader}
                    numColumns={2}
                    renderItem={this._renderRow.bind(this)}
                    keyExtractor={(item) => `${item.ID}-${item.goodsName}`}
                    refreshControl={<RefreshControl
                        onRefresh={this._onRefresh.bind(this)}
                        refreshing={this.state.isRefreshing} />}
                    onScroll={this._onScroll.bind(this)}
                />
            </View>
        )
    }
}

export default HomeScreen
